<template>
  <!--  h-[100vh]-->
  <div class="w-[100vw] h-[100vh] absolute top-0 left-0  bg-black ignore">
    <el-amap ref="amapRef" view-mode="3D" :pitch="40" skyColor="#033447" :center="centerValue" :zoom="zoom"
      :style="`opacity: ${amapOpacity};`" @init="init" @complete="amapComplete" :doubleClickZoom="false">
      <el-amap-marker v-for="(marker, index) in markers" :key="index" :position="marker.position"
        anchor="bottom-center">
        <div slot="content">
          <div class="relative z-[10] hover:z-[100]" v-if="ishows(marker)" @mouseenter="onMouseOver(marker)"
            @mouseleave="onMouseOut(marker)" @click="onclickmarker(marker)">
            <img :src="marker.type == 1 ? redmapmark : mapmark" alt="" class="w-[37px] h-[88px]" />
            <!-- <div class="absolute bottom-[7px] left-[-2px]" v-if="marker.showdetals && marker.type == 1">
              <img class="w-[36] h-[46px]" src="@/assets/screenimg/mapimg/scaleimg.png" alt="">
            </div> -->
            <div class="absolute top-[8px] left-[11px]">
              <addresmap class="w-[15px] h-[20px]" />
            </div>
            <div class="absolute bottom-[-10px] left-[-5px]" v-if="marker.showdetals && marker.type == 1">
              <div class="animated-box"></div>
            </div>
            <!-- <mapnormal  class="w-[37px] h-[100px]" /> -->
            <div class="absolute  top-[-120px]" :class="parms.menuType > 1 ? 'right-[-80px]' : 'right-[-140px]'"
              v-if="marker.showdetals == true">
              <div class="w-[195px]  text-[#fff] text-[14px] h-[126px]" v-if="parms.menuType > 1">
                <div class="h-[30px]  px-[10px] leading-[30px] flex gap-[20px] items-center justify-between"
                  :class="marker.type == 1 ? 'marktitle' : 'marktitles'">
                  <div class="flex items-center gap-[7px] justify-center">
                    <div class="flex items-center justify-center"><img class="w-[15px] h-[16px]"
                        src="@/assets/screenimg/unityicon.png" alt=""></div>
                    <div class="flex items-center justify-center titles">{{ isNullOrEmpty(marker.projectName) }}</div>
                  </div>
                  <div class="flex items-center gap-[4px] justify-center">
                    <div class="flex items-center justify-center text-[12px] whitespace-nowrap text-[#C2C7D1]">进入</div>
                    <div class="flex items-center justify-center">
                      <el-icon>
                        <ArrowRight color="text-[#C2C7D1]" />
                      </el-icon>
                    </div>
                  </div>
                </div>
                <div :class="marker.type == 1 ? 'markcontenta alarm' : 'markcontentsa normal'">
                  <div class="maplistitem">
                    <div class="daichul">{{ isNullOrEmpty(marker?.state?.dealing) }}</div>
                    <div class="titleitem">{{ parms.menuType == 2 ? '巡检中' : '处理中' }}</div>
                  </div>
                  <div class="linefeng"></div>
                  <div class="maplistitem">
                    <div class="numitem text-[#ff802b]">{{ isNullOrEmpty(marker?.state?.wait) }}</div>
                    <div class="titleitem">{{ parms.menuType == 2 ? '待巡检' : '待处理' }}</div>
                  </div>
                </div>
              </div>
              <div class="w-[316px]  text-[#fff] text-[14px] h-[126px]" :class="marker.showdetals ? 'zone' : 'ztwo'"
                v-else>
                <div class="h-[30px]  px-[10px] leading-[30px] gap-[20px] flex items-center justify-between"
                  :class="marker.type == 2 ? ' marktitles' : marker?.device?.warning !== 0 ? 'marktitle' : marker?.device?.failure !== 0 ? 'failuretit' : 'offlinetit'">
                  <div class="flex items-center gap-[7px] justify-center">
                    <div class="flex items-center justify-center"><img class="w-[15px] h-[16px]"
                        v-if="marker.isfamily !== 1"  :src="marker.type == 2 ? mapnormal : marker?.device?.warning !== 0 ? mapalarm : marker?.device?.failure !== 0 ? mapfailure : mapoffline" alt="">
                      <family v-else class="w-[15px] h-[15px]" />
                    </div>
                    <div class="flex items-center justify-center text-[14px] titles">{{ isNullOrEmpty(
      marker.projectName) }}</div>
                  </div>
                  <div class="flex items-center gap-[4px] justify-center" v-if="marker.isfamily !== 1">
                    <div class="flex items-center justify-center text-[12px] whitespace-nowrap text-[#C2C7D1]">进入</div>
                    <div class="flex items-center justify-center">
                      <el-icon>
                        <ArrowRight color="text-[#C2C7D1]" />
                      </el-icon>
                    </div>
                  </div>
                </div>
                <div class="markcontent"
                  :class="marker.type == 2 ? ' normal' : marker?.device?.warning !== 0 ? 'alarm' : marker?.device?.failure !== 0 ? 'failure' : 'offline'">
                  <div class="maplistitem">
                    <div class="gradient-text number">{{ isNullOrEmpty(marker?.device?.total) }}</div>
                    <div class="titleitem">总数</div>
                  </div>
                  <div class="linefeng"></div>
                  <div class="maplistitem">
                    <div class="numitem text-[#ff802b]">{{ isNullOrEmpty(marker?.device?.failure) }}</div>
                    <div class="titleitem">故障</div>
                  </div>
                  <div class="linefeng"></div>
                  <div class="maplistitem">
                    <div class="numitem">{{ isNullOrEmpty(marker?.device?.offline) }}</div>
                    <div class="titleitem">离线</div>
                  </div>
                  <div class="linefeng"></div>
                  <div class="maplistitem">
                    <div class="numitem text-[#ff4141]">{{ isNullOrEmpty(marker?.device?.warning) }}</div>
                    <div class="titleitem">报警</div>
                  </div>
                  <div class="linefeng"></div>
                  <div class="maplistitem">
                    <div class="numitem text-[#35ff48]">{{ isNullOrEmpty(marker?.device?.normal) }}</div>
                    <div class="titleitem">正常</div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-amap-marker>
    </el-amap>
  </div>
</template>

<script setup lang="ts">
import { isNullOrEmpty } from '@/utils/functions'
import { showSuperviseFamilyInfo } from "@/views/large-data-screen/utils";
import mapmark from "@/assets/screenimg/mapimg/marknored.png"
import redmapmark from "@/assets/screenimg/mapimg/markred.png"
import addresmap from "@/assets/screenimg/screenSvg/addresmap.svg?component"
import { ArrowRight } from '@element-plus/icons-vue'
import { emitter } from '@/utils/mitt'
import mapalarm from "@/assets/screenimg/mapimg/alarm.png"
import mapoffline from "@/assets/screenimg/mapimg/offline.png"
import mapfailure from "@/assets/screenimg/mapimg/failure.png"
import mapnormal from "@/assets/screenimg/unityicon.png"
import {
  ElAmap,
  ElAmapMarker
} from "@vuemap/vue-amap";
import { projectalarm, personalpoint } from "@/api/screen/screenmune"
import { usePageVariablesStoreHook } from "@/store/modules/pageVariables";
import { cloneDeep } from "@pureadmin/utils";
import { useDataDashboardThemeStoreHook } from "@/store/modules/data-dashboard-theme";
import family from "@/assets/screenimg/screenSvg/famly.svg?component";
const useDataDashboardThemeStore = useDataDashboardThemeStoreHook();
const emits = defineEmits(["amapLoaded"])
const newdata = ref([])
const islargin = ref(false)
const usePageVariablesStore = usePageVariablesStoreHook()
const defaultcenter = [103.981651, 30.722975];
const centerValue = ref(defaultcenter);
const zoom = ref(12);
const channel = ref(null)
const markers = ref([
]);
const amapRef = ref();
const amapOpacity = ref(0)
const props = defineProps({
  centerDialogVisible: {
    type: Boolean,
    default: false
  }
});
const footbtnid = ref(1)
const parms = ref(
  { menuType: 0, systematicId: "" }
)
onBeforeMount(() => {
  channel.value = new BroadcastChannel('data-dashboard-them');
  channel.value.onmessage = (e) => {
    parms.value.systematicId = ""
    // useDataDashboardThemeStore.CHANGE_SETTING({ key: e.data.key, value: e.data.value })
    if (e.data.type == "getdataDashboardType") {
      if (e.data.value == 1) {
        let screen = cloneDeep(usePageVariablesStore.getScreen())
        screen.project = null
        usePageVariablesStore.setScreen(screen)
        getmaplist()
      } else if (e.data.value == 2) {
        getmaplist()
      } else if (e.data.value == 3) {
        console.log('监管大屏请求');

      }
    } else if (e.data.type == "projectId") {
      let arr = markers.value.filter(item => item.id == e.data.value)
      //切换中心点位
      if (arr.length > 0) {
        centerValue.value = arr[0].position;
        map.value.setZoomAndCenter(18, centerValue.value);
        // map.value.setFitView();
      }
      channel.value.postMessage({ key: 'dataDashboardMenuId', value: e.data.value, type: 'changemenuTypemap' });
    } else if (e.data.type == "changemenuTypemap") {
      if (e.data.value || e.data.value == 0) {
        parms.value.menuType = e.data.value
        getmaplist()
      }
    } else if (e.data.type == "footbtnchange") {
      footbtnid.value = e.data.value
      if (e.data.value == 1) {
        islargin.value = false
        getmaplist()
      } else {
        islargin.value = true
        let arr = markers.value.filter(item => item.type == 1)
        if (arr.length > 0) {
          markers.value = arr
          nextTick(() => {
            init(map.value)
          })
        }
      }
    } else if (e.data.type == 'systematicId') {
      parms.value.systematicId = e.data.value
      getmaplist()
    }
  }
  channel.value.postMessage({ key: 'getDataDashboardType', value: null, type: 'get' });
});
onBeforeUnmount(() => {
  channel.value.close()
})
const onclickmarker = (item) => {
  if (item.isfamily == 1) {
    showSuperviseFamilyInfo(item.id, 1);
  } else {
    channel.value.postMessage({ key: '', value: cloneDeep(item), type: 'changeProject' });
    channel.value.postMessage({ key: 'dataDashboardType', value: 2, type: 'change' });
  }

};
watch(
  () => props.centerDialogVisible,
  newVal => {
    if (newVal) {
      console.log(props.centerDialogVisible);
    }
  }
);

// normal （标准）、dark（幻影黑）、light（ 月光银）、whitesmoke（远山黛）、fresh（草色青）、grey（雅士灰）、graffiti（涂鸦）、macaron（马卡龙）、blue（靛青蓝）、darkblue（极夜蓝）、wine（酱籽）
let map = ref(null);
const init = e => {
  map.value = e;
  const stynane = "amap://styles/" + useDataDashboardThemeStore.getMapTheme();   //自定义id  e9e8e6508afcdb45de31dd68cc1f500e 
  map.value.setMapStyle(stynane);
  map.value.setFeatures(['road', 'bg', 'building', 'point'])
  // map.value.setFeatures(['road', 'bg', 'building','point'])
  setTimeout(() => {
    map.value.setFitView();
  }, 500);
};
const amapComplete = () => {
  // amapOpacity.value = 1
  nextTick(() => {
    emits("amapLoaded");
  })
}
const onMouseOver = item => {
  //  let arr= markers.value.filter(item => item.id == item.id);
  markers.value.forEach((items) => {
    if (items.id == item.id) {
      items.showdetals = true
    } else {
      items.showdetals = false
    }
  })
  // centerValue.value = item.position;
};
// 鼠标移出
const onMouseOut = (item) => {
  item.showdetals = false
};
const isalarem = (item) => {
  if (parms.value.menuType > 1) {
    return item.state.wait + item.state.dealing > 0 ? 1 : 2
  } else {
    return item.device.failure + item.device.offline + item.device.warning > 0 ? 1 : 2
  }
}
const isalarems = (item) => {
  return item.fault + item.offLine + item.alarm > 0 ? 1 : 2
}
const getmaplist = (type = 1) => {
  newdata.value = []
  if (useDataDashboardThemeStore.dataDashboardMenuId !== 2) {
    projectalarm(parms.value).then(res => {
      if (res.code == 200 && res.result.data.length > 0) {
        res.result.data.forEach(item => {
          if (item.lng !== "" && item.lat !== "") {
            newdata.value.push({
              position: [item.lng, item.lat],
              device: item.device,
              state: item.state,
              isfamily: 2,
              projectName: item.projectName,
              draggable: false,
              showdetals: false,
              type: isalarem(item),
              id: item.id
            })
          }
        })
      }

      let arr1 = JSON.parse(JSON.stringify(markers.value))
      let arr2 = JSON.parse(JSON.stringify(newdata.value))
      let obj = {}
      arr1.forEach((item, index) => {
        delete item.showdetals
      })
      arr2.forEach((item, index) => {
        delete item.showdetals
      })
      if (JSON.stringify(arr1) !== JSON.stringify(arr2) || markers.value.length == 0) {
        markers.value = newdata.value
      }
      if (type == 1) {
        nextTick(() => {
          init(map.value)
        })
      }
    })
  } else {
    personalpoint(parms.value).then(res => {
      if (res.code == 200 && res.result.length > 0) {
        res.result.forEach(item => {
          if (item.lng !== "" && item.lat !== "") {
            newdata.value.push({
              position: [item.lng, item.lat],
              device: {
                total: item.total,
                failure: item.fault,
                offline: item.offLine,
                warning: item.alarm,
                normal: item.normal
              },
              state: item.state,
              isfamily: 1,
              projectName: item.familyName,
              draggable: false,
              showdetals: false,
              type: isalarems(item),
              id: item.familyId
            })
          }
        })
      }
      let arr1 = JSON.parse(JSON.stringify(markers.value))
      let arr2 = JSON.parse(JSON.stringify(newdata.value))
      arr1.forEach((item, index) => {
        delete item.showdetals
      })
      arr2.forEach((item, index) => {
        delete item.showdetals
      })
      if (JSON.stringify(arr1) !== JSON.stringify(arr2) || markers.value.length == 0) {
        markers.value = newdata.value
      }
      if (type == 1) {
        nextTick(() => {
          init(map.value)
        })
      }
    })
  }

}
function ishows(item) {
  if (islargin.value) {
    if (item.type == 1) {
      return true
    } else {
      return false
    }
  } else {
    return true
  }
}
watch(
  () => useDataDashboardThemeStore.overviewCenterPoint,
  newVal => {
    if (newVal) {
      centerValue.value = newVal;
      map.value.setZoomAndCenter(18, centerValue.value);
    }
  }
);
watch(
  () => useDataDashboardThemeStore.mapTheme,
  newVal => {
    if (newVal) {
      if (map.value) {
        const stynane = "amap://styles/" + newVal;   //自定义id  e9e8e6508afcdb45de31dd68cc1f500e 
        map.value.setMapStyle(stynane);
      }
    }
  }
);
const mesage = (data) => {
  getmaplist(2)

}
//消息推送
onMounted(() => {
  emitter.on('alarmEvents', mesage)
})
onBeforeUnmount(() => {
  emitter.off('alarmEvents', mesage)
})
</script>

<style lang="scss" scoped>
.markcontent {
  width: 316px;
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 82px;

  border-top: none;

  .linefeng {
    width: 1px;
    height: 45px;
    // opacity: 0.5;
  }

  .maplistitem {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .titleitem {
      font-size: 12px;
      line-height: 12px;
      margin-top: 10px;
      text-align: center;
    }

  }

}

.alarm {
  // background: linear-gradient(0deg, rgba(45, 21, 21, 0.54) 0%, rgba(87, 40, 47, 0.5) 70%, rgba(255, 93, 93, 0.42) 100%);
  border: 1px solid #D82B33;
  box-shadow: inset 0px 0px 50px 0px rgba(216, 43, 51, 0.5);
}

.normal {
  background: linear-gradient(0deg, rgba(34, 43, 61, 0.5) 0%, rgba(26, 32, 61, 0.4) 51%, rgba(24, 41, 84, 0.4) 100%);
  border: 1px solid rgba(62, 108, 197, 0.93);
  box-shadow: inset 0px 0px 50px 0px rgba(62, 108, 197, 0.5);
}

.offline {
   background: linear-gradient(180deg, rgba(91, 92, 106,0.7) 20%,rgba(2, 3, 12,0.7) 100%);
  border: 1px solid #8D9398;
  box-shadow: inset 0px 0px 50px 0px rgba(186, 186, 186, 0.5);
}

.failure {
  border: 1px solid #FF6E1F;
  box-shadow: inset 0px 0px 50px 0px rgba(255, 110, 31, 0.5);

}

.markcontents {
  width: 316px;
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 82px;
  background: linear-gradient(0deg, rgba(34, 43, 61, 0.5) 0%, rgba(26, 32, 61, 0.4) 51%, rgba(24, 41, 84, 0.4) 100%);
  border: 1px solid rgba(62, 108, 197, 0.93);
  border-top: none;

  .linefeng {
    width: 1px;
    height: 45px;
    background: linear-gradient(0deg, rgba(12, 35, 72, 0.5) 0%, rgba(255, 255, 255, 0.5) 51%, rgba(12, 34, 70, 0.5) 100%);
    // opacity: 0.5;
  }

  .maplistitem {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .titleitem {
      font-size: 12px;
      line-height: 12px;
      margin-top: 10px;
      text-align: center;
    }

  }

}

.markcontenta {
  width: 195px;
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 82px;
  background: linear-gradient(0deg, rgba(45, 21, 21, 0.54) 0%, rgba(87, 40, 47, 0.5) 70%, rgba(255, 93, 93, 0.42) 100%);
  border: 1px solid #D82B33;

  .linefeng {
    width: 1px;
    height: 45px;
    background: linear-gradient(0deg, rgba(12, 35, 72, 0.5) 0%, rgba(255, 255, 255, 0.5) 51%, rgba(12, 34, 70, 0.5) 100%);
    // opacity: 0.5;
  }

  .maplistitem {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .titleitem {
      font-size: 12px;
      line-height: 12px;
      margin-top: 10px;
      text-align: center;
    }

  }

}

.markcontentsa {
  width: 195px;
  padding: 0 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  height: 82px;
  background: linear-gradient(0deg, rgba(34, 43, 61, 0.5) 0%, rgba(26, 32, 61, 0.4) 51%, rgba(24, 41, 84, 0.4) 100%);
  border: 1px solid rgba(62, 108, 197, 0.93);

  .linefeng {
    width: 1px;
    height: 45px;
    background: linear-gradient(0deg, rgba(12, 35, 72, 0.5) 0%, rgba(255, 255, 255, 0.5) 51%, rgba(12, 34, 70, 0.5) 100%);
    // opacity: 0.5;
  }

  .maplistitem {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .titleitem {
      font-size: 12px;
      line-height: 12px;
      margin-top: 10px;
      text-align: center;
    }

  }

}

.marktitle {
  background: #532a2f;
  border: 1px solid #d82b33;
  border-bottom: none;
}

.failuretit {
  background: #4d3527;
  border: 1px solid #FF6E1F;
  border-bottom: none;
}

.offlinetit {
  background: #43474a;
  border: 1px solid #8D9398;
  border-bottom: none;
}

.marktitles {
  background: #0C285D;
  border: 1px solid #3E6CC5;
  border-bottom: none;
}

// 渐变文字
.gradient-text {
  background: linear-gradient(0deg, #6196ff 0%, #ffffff 100%);
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.daichul {
  color: #27E1DD;
}

.titles {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.animated-box {
  width: 50px;
  height: 25px;
  background-color: #4c080e;
  border-radius: 80%;
  /* 圆形盒子 */
  animation: colorRotateScale 2s infinite;
  /* 应用动画 */
}

/* 定义关键帧动画 */
@keyframes colorRotateScale {
  0% {
    background-color: rgba(105, 35, 40, 0.2);
    /* 初始颜色 */
    transform: scale(1);
    /* 初始旋转角度和大小 */
    box-shadow: 0px 0px 10px rgba(179, 23, 34, 0.6) inset;
  }

  25% {
    background-color: rgba(105, 35, 40, 0.2);
    /* 颜色变化 */
    transform: scale(1.2);
    /* 旋转90度并放大 */
    box-shadow: 0px 0px 10px rgba(179, 23, 34, 0.6) inset;
  }

  50% {
    background-color: rgba(105, 35, 40, 0.2);
    /* 颜色变化 */
    transform: scale(1);
    /* 旋转180度并回到初始大小 */
    box-shadow: 0px 0px 10px rgba(179, 23, 34, 0.6) inset;
  }

  75% {
    background-color: rgba(105, 35, 40, 0.2);
    /* 颜色变化 */
    transform: scale(1.2);
    /* 旋转270度并放大 */
    box-shadow: 0px 0px 10px rgba(179, 23, 34, 0.6) inset;
  }

  100% {
    background-color: rgba(105, 35, 40, 0.2);
    /* 回到初始颜色 */
    transform: scale(1);
    /* 旋转360度并回到初始大小 */
    box-shadow: 0px 0px 10px rgba(179, 23, 34, 0.6) inset;
  }
}
</style>
<style>
.zone {
  position: relative;
  z-index: 100 !important;
}

.ztow {
  position: relative;
  z-index: 1 !important;
}
</style>
